import { isElement } from 'lodash-es';
const barWidth = 60; // 柱状图一个柱子所占空间
const textSize = 10;
const compare = property => {
  return function (a, b) {
    const value1 = a[property];
    const value2 = b[property];
    return value2 - value1;
  };
};
/**
 * 是否显示dataZoom
 * @param {HTMLElement} el echarts id
 * @param {Number} dataLength echarts  data 数组长度
 * @return {Boolean}
 */
export const getDataZoomVisibie = function (el, dataLength: number) {
  const chartWidth = isElement(el) ? el.clientWidth : 0;
  const showListNum = Math.floor(chartWidth / barWidth); // 可视区域能展示多少根柱子
  return showListNum < dataLength;
};

/**
 * 根据echarts图表宽度，动态计算echarts柱状图x轴展示的柱子的数量
 * @param {HTMLElement} el echarts id
 * @param {Number} dataLength echarts  data 数组长度
 * @return {Number} 返回 datazoom end 值
 */
export const getDatazoomEnd = function (el, dataLength: number) {
  const chartWidth = isElement(el) ? el.clientWidth : 0;
  let dataZoomEnd = 0; // datazoom end 值
  let showListNum = 0; // echarts x轴展示多少个柱子
  // 根据x轴数组长度，动态计算datazoom end值
  showListNum = Math.floor(chartWidth / barWidth); // 可视区域能展示多少根柱子
  dataZoomEnd = Math.floor((showListNum / dataLength) * 100);
  return dataZoomEnd;
};

/**
 * 文字长度超过 TEXT_MAX 部分使用... 替换
 * @param {Object | String} param echarts formatter 函数的参数
 * @return {String} 返回 处理后的文本
 */
export const substringName = function (param) {
  let text = '';
  const str = typeof param === 'string' ? param : param.name;
  if (str.length > textSize) {
    text = str.substring(0, textSize) + '...';
  } else {
    text = str;
  }
  return text;
};

/**
 * 处理饼状图数据
 * 由于饼图的数据过多，文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线
 * @param {Array} data 饼状图数据
 * @param {Number} num 饼状图指示线的数量
 * @return {Array} 处理后的饼状图数据
 */
export const labelLineData = function (data, num = 10) {
  // let sortData = data.sort(compare("value"));
  data.forEach((item, index) => {
    item.label = {
      show: (function () {
        if (index < num) {
          return true;
        } else {
          return false;
        }
      })(),
      // formatter: substringName,
      position: (function () {
        if (index < num) {
          return 'outside';
        } else {
          return 'inside';
        }
      })(),
    };
    item.labelLine = {
      show: (function () {
        if (index < num) {
          return true;
        } else {
          return false;
        }
      })(),
    };
  });
  return data;
};
